<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/css/user.css" media="all"/>
</head>
<body>
<div class="layui-fluid">
<input type="text" id="pageindex" value="${pageindex}" hidden>
<input type="text" id="pagecount" value="${pagecount}" hidden>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this"><a href="/admin/user/userlist">用户列表</a></li>
    </ul>
</div>
<div class="layui-fluid">
    <div id="adduser">
        <button id="adduserbtn" class="layui-btn">添加新用户</button>
    </div>
</div>
<div class="layui-fluid">
    <table class="layui-table" lay-even="" lay-skin="row">
        <colgroup>
            <col width="4%">
            <col width="5%">
            <col width="5%">
            <col width="5%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>账号</th>
            <th>头像</th>
            <th>用户名</th>
            <th>角色</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>邮件</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list userInfoList?sort_by("createtime")?reverse  as userinfo>
        <tr>
            <td>${userinfo_index+1}</td>
            <td>${userinfo.accountid}</td>
            <td><img src="${userinfo.photo}" style="width: 35px;height: 35px;"></td>
            <td>${userinfo.username}</td>
            <td>${userinfo.raRole.role}</td>
            <td>${userinfo.sex}</td>
            <td>${userinfo.age}</td>
            <td>${userinfo.phone}</td>
            <td>${userinfo.mail}</td>
            <td>${userinfo.address}</td>
            <td>
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-small layui-btn-normal" accountid="${userinfo.accountid}" name="userdetail">详情</a>
                    <#if userinfo.roleid!=1>
                        <#if userinfo.del_flag=="1">
                            <a class="layui-btn layui-btn-small layui-btn-warm" accountid="${userinfo.accountid}" delflag="${userinfo.del_flag}" name="dongjie">解冻</a>
                        <#else>
                            <a class="layui-btn layui-btn-small" accountid="${userinfo.accountid}" delflag="${userinfo.del_flag}" name="dongjie">冻结</a>
                        </#if>
                        <a class="layui-btn layui-btn-small layui-btn-danger" accountid="${userinfo.accountid}" name="deluser">删除</a>
                    </#if>
                </div>
            </td>
        </tr>
        </#list>
        </tbody>
    </table><br>
    <div id="pagehelper"></div>
</div>

<#--选择添加用户的方式-->
<div class="layui-fluid">
    <div id="addtipbtn" hidden style="width: 100%;height: 100%;">
        <div id="left" style="float:left; width:50%;  height:100%;">
            <div id="singlebtn" class="layui-btn" >
                <p style="padding-top:50%;">
                    <i class="layui-icon" style="font-size: 100px; color: rgba(204,166,131,0.93);">&#xe642;</i>
                </p>

            </div>
        </div>
        <div id="right" style="float:left ;  width:50%; height:100%;">
            <div id="mulbtn" class="layui-btn layui-btn-normal">
                <p style="padding-top: 50%;">
                    <i class="layui-icon" style="font-size: 100px; color: #12cc4d;">&#xe61d;</i>
                </p>
            </div>
        </div>
    </div>
</div>


<#--添加单个用户样式-->
<div class="layui-fluid">
    <div id="addsingleuser" hidden>
        <form class="layui-form" style="width: 50%;margin-top: 3%;margin-left: 3%;">
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="accountid" id="accountid" required lay-verify="required"
                           class="layui-input" placeholder="请输入账号,一旦确认将无法更改" >
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                           class="layui-input">
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><a id="defaultbtn" class="layui-btn layui-btn-small">默认密码</a>  默认密码与账号相同</div>
            </div><br>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="roleid" lay-verify="required">
                    <#list raRoles as rarole>
                        <option value="${rarole.id}">${rarole.role}</option>
                    </#list>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女" >
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                           class="layui-input">
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">电子邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="mail" required lay-verify="required" placeholder="请输入电子邮箱" autocomplete="off"
                           class="layui-input">
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">联系方式</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required lay-verify="required" placeholder="请输入联系方式" autocomplete="off"
                           class="layui-input">
                </div>
            </div><br>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" required lay-verify="required" placeholder="请输入详细地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div><br>
            <div class="layui-form-item" hidden>
                <label class="layui-form-label">头像地址</label>
                <div class="layui-input-block">
                    <input type="text" name="photo" id="photo"  autocomplete="off" class="layui-input" value="/static/image/photo.jpg">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">信息无误,确认添加</b></button>
                </div>
            </div>
        </form>
        <img id="personphoto" src="/static/image/photo.jpg">
        <div id="uploadphoto" >
            <button id="uploadfile" type="button" class="layui-btn">上传头像</button>
        </div>
    </div>
</div>


<#--批量添加的样式-->
    <div class="layui-fluid">
        <div id="addmuluser" style="margin-top: 3%;margin-left: 3%;" hidden>
            <p id="filetip" style="margin-bottom: 10px;"></p>
            <div>
                <button id="uploadexcel" type="button" class="layui-btn">请上传特定格式的excel文件</button>
            </div>
            <a id="checkmulbtn" class="layui-btn" style="margin-top: 3%;">确认导入</a>
            <div id="examplelist" style="margin-top:6%;">
                <p style="margin-bottom: 15px;margin-top:20px;font-size: x-large;color: rgba(30,204,50,0.93)">请按下图指定格式创建excel文件：</p>
                <img src="/static/image/modelexcel.png">
                <p style="margin-top: 20px;margin-bottom: 15px;font-size: larger;color: rgba(204,45,29,0.93)">注意：</p>
                <p style="margin-bottom: 10px;font-size: larger;">1.除密码，头像之外，其他都是必填</p>
                <p style="margin-bottom: 10px;font-size: larger;">2.密码如果为空，则默认与账号相同</p>
                <p style="margin-bottom: 10px;font-size: larger;">3.账号一旦确认将不可修改，请谨慎填写账号</p>
                <p style="margin-bottom: 10px;font-size: larger;">4.每列设置必须与上图一致(特别是第一行的设置，命名都是固定的，请照搬，勿更改)，否则会导入失败</p>
            </div>
            <p id="filepath" hidden></p>
        </div>
    </div>


<#--用户详情-->
    <div class="layui-fluid">
        <div id="userdetail" hidden>
            <div style="height: 300px;">
                <form class="layui-form" style="margin-top: 1%;margin-right: 3%;" action="">
                    <div id="detailhead" style="height: 55px;width: 100%;">
                        <div class="layui-form-item" style="float: right;">
                            <div class="layui-input-block">
                                <input id="open" name="open" lay-skin="switch" lay-filter="switchfilter" lay-text="关闭|修改" type="checkbox">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <button id="userdetailbtn" class="layui-btn layui-btn-disabled layui-btn-small" lay-submit lay-filter="userdetailbtn" style="margin-top: 8px;" disabled>确认修改</button>
                                &nbsp;&nbsp;
                                <a id="btnupdatepwd" class="layui-btn layui-btn-disabled layui-btn-small" style="margin-top: 8px;" disabled>修改密码</a>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="float: left;width: 10%;margin-left: 15px;">
                            <img id="userphoto" src="" style="width: 100%;height: 100%;">
                            <button id="myuploadfile" type="button" class="layui-btn" disabled>上传头像</button>
                        </div>
                        <div style="float: left;width: 40%;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">账号</label>
                                <div class="layui-input-block">
                                    <input type="text" id="myaccountid" name="accountid" required  lay-verify="required" autocomplete="off" class="layui-input layui-disabled" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-block">
                                    <select id="myrole" name="roleid" lay-verify="required" disabled>
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input type="text" id="myage" name="age" required  lay-verify="required|number" placeholder="请输入年龄" autocomplete="off" class="layui-input" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="男" title="男" disabled >
                                    <input type="radio" name="sex" value="女" title="女" disabled>
                                </div>
                            </div>
                        </div>
                        <div style="float: left;width: 40%;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled id="myusername" name="username" required  lay-verify="required" placeholder="请输入新的用户名" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-block">
                                    <input type="text" id="myphone" disabled name="phone" required  lay-verify="required|phone" placeholder="请输入新的联系电话" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" id="mymail" disabled name="mail" required  lay-verify="required|email" placeholder="请输入新的邮箱地址" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">地址</label>
                                <div class="layui-input-block">
                                    <input type="text" id="myaddress" disabled name="address" required  lay-verify="required" placeholder="请输入新的邮箱地址" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item" hidden>
                                <label class="layui-form-label">头像</label>
                                <div class="layui-input-block">
                                    <input type="text" id="myphoto" name="photo" required  lay-verify="required" placeholder="头像" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div id="logdiv" hidden>
                <div style="float: left;width: 40%;margin-left: 2%;margin-right: 1%;">
                    <div class="layui-collapse">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">登录日志
                                <a id="more" style="float: right">更多>></a>
                            </h2>
                            <div class="layui-colla-content layui-show">
                                <table id="logtable" class="layui-table" lay-even lay-skin="nob">
                                    <colgroup>
                                        <col width="10%">
                                        <col width="30%">
                                        <col width="30%">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>账号</th>
                                        <th>登录时间</th>
                                        <th>IP地址</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="float: left;width: 50%;margin-right: 3%;">
                    数据图
                </div>
            </div>

        </div>
    </div>

<#--用户详情修改密码-->
    <div class="layui-fluid">
        <div id="updatepwddetail" style="margin-top: 10px;margin-right: 10px;" hidden>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" id="mypassword" name="password" required  lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>

<#--日志全部显示-->
    <div class="layui-fluid">
        <div id="logdetail" style="margin-left: 1%;margin-right: 1%;" hidden>
            <table id="logtabledetail" class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="10%">
                    <col width="30%">
                    <col width="30%">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>账号</th>
                    <th>登录时间</th>
                    <th>IP地址</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</div>

<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/js/admin/user.js"></script>
</body>
</html>